import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appSwithActive]'
})
export class SwithActiveDirective {

  constructor(
    private el: ElementRef
  ) { }

  @HostListener('click') onClick() {
    this.addClass();
  }

  private addClass() {
    if (!this.el.nativeElement.classList.contains('active')) {
      const $parentNode = this.el.nativeElement.parentNode;

      $parentNode.childNodes.forEach(node => {
        if (node.classList) {
          node.classList.remove('active');
        }
      });
      this.el.nativeElement.classList.add('active');
    }
  }
}
